<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>其他方式支付</title>
  <link href="/pc/css/css.css" rel="stylesheet" type="text/css"/>
  <link href="/pc/css/pay/main.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="/pc/js/jquery-1.11.3.min.js"></script>
  <style>
    body {
      background-color: rgb(241, 241, 241);
    }

    .pay_main {
      width: 1000px;
      margin: 0 auto;
      background: #FFF;
    }

    .pw-box-ft {
      background-image: url("/pc/images/payment/icon-red.png");
    }

    .p-w-sidebarW01 {
      background-image: url("/pc/images/payment/phone-bg.png");
    }

    .p-w-sidebarA01 {
      background-image: url("/pc/images/payment/alipay-bj.png");
    }

    .p-w-sidebarQ01 {
      background-image: url("/pc/images/payment/qqpay-bj.png");
    }

    .main {
      background: none;
    }
  </style>
</head>
<body>
<div class="pay_main">
  <div th:include="payment/introduce/page :: header"></div>
</div>
<div class="main" style="margin-top: -5px">
  <div class="w">
    <!-- order 订单信息 -->
    <div class="order clearfix order-noQrcode">
      <!-- 订单信息 -->
      <div class="o-left"><h3 class="o-title">订单提交成功，请尽快付款！订单号：<span id="payNumber"
                                                                     th:text="${#httpServletRequest.getParameter('payNumber')}"></span>
      </h3>

        <p class="o-tips" id="deleteOrderTip">
        </p>
      </div>
      <!-- 订单信息 end --><!-- 订单金额 -->
      <div class="o-right">
        <div class="o-price"><em>应付金额</em><strong th:text="${payAmount}">85.00</strong><em>元</em></div>
        <div class="o-detail"><!--<a onclick="payOrder.toggleDetail(this);" href="javascript:;">订单详情<i></i></a>--></div>
      </div>
      <!-- 订单金额 end -->
      <div class="o-list j_orderList" id="listPayOrderInfo"><!-- 单笔订单 -->
        <div class="o-list-info">
          <span class="mr10">收货地址：山东济南市天桥区城区凤凰山路凤凰山商贸城2楼A区三际数码有限公司</span>
          <span class="mr10">收货人：XXXX</span>
          <span>156****8175</span>
        </div>
        <!-- 多笔订单 end -->
      </div>
    </div>
    <script type="text/javascript">
      var count = 0, qrTimer = null,id_of_settimeout = null;
      var payType ,payNumber ;
      var sock = null;//通信
      $(function () {
        payType = $('#payType').attr('data');
        payNumber = $("#payNumber").text();
        getImage2();
      });

      /**
       * 查询订单详情
       * @type {{toggleDetail: payOrder.toggleDetail}}
       */
      var payOrder = {
        toggleDetail: function (ele) {
          var $orderList = $('.j_orderList');
          if (!$(ele).hasClass('opened')) {
            //查询订单信息
            $.ajax({
              url: "" + globalVar.orderId,
              type: "get",
              dataType: "html",
              error: function () {
                $("#listPayOrderInfo").html("");
              },
              success: function (data) {
                $("#listPayOrderInfo").html(data);
                $orderList.slideDown(300);
                $(ele).addClass('opened').html('收起详情<i></i>');
              }
            });
          } else {
            $orderList.slideUp(300);
            $(ele).removeClass('opened').html('订单详情<i></i>');
          }

        }
      };

      /**
       * 查询订单的状态
       */
      function queryOrderBankState() {
        if (count > 11) {
          clearInterval(qrTimer)
        }
        count++;
        $.ajax({
          type: "GET",
          url: "/api/allinPay/" + payNumber,
          dataType: "json",
          timeout: 4000,
          async: false,
          success: function (result) {
            if (result != null && result.trxStatus === '0000') {
              //直接跳到成功页
              window.location.href = "/api/allinPay/result";
            }
          }
        });
      }
      function handleNotification(message) {
        console.info(message);
        if (message.body=="success"){
          //直接跳到成功页
          window.location.href = "/api/allinPay/result";
        }
      }
      var countdown = 60;
      function getImage() {
        if (countdown == 0) {
          var html = '二维码已过期，<a href="javascript:getImage2();">刷新</a>页面重新获取二维码。';
          $('.j_weixinInfo').html(html);
          $('.j_weixinInfo').addClass("font-red");
          $('#weixinImageURL').attr("src", "/pc/images/QRCode/qr_encode.png");
          countdown = 60;
          sock.close();
          return;
        } else {
          var html = '距离二维码过期还剩<span class="j_qrCodeCountdown font-bold font-red">60</span>秒，过期后请刷新页面重新获取二维码。';
          $('.j_weixinInfo').html(html);
          $(".j_qrCodeCountdown").text(countdown);
          countdown--;
        }
        id_of_settimeout = setTimeout(function () {
          getImage()
        }, 1000)
      }
      //刷新
      /*function getImage2() {
        count = 0;
        $.ajax({
          type: "GET",
          url: "/allinPay/getImage?payType=" + payType + "&payNumber=" + payNumber,
          dataType: "text",
          timeout: 4000,
          async: false,
          success: function (result) {
            if (result != "") {
              $('#weixinImageURL').attr("src", "/pc/images/QRCode/" + result + ".png");
              qrTimer = setInterval(queryOrderBankState, 5000);
              getImage();
              $('.j_weixinInfo').removeClass("font-red");
              return;
            }else if (result == "0000"){
              alert("订单已经支付");
              parent.location.href = "/custom/orders.html";
            }
          },
          error: function (result) {
            $('.j_weixiRetry').show();
          }
        });
      }*/
      var ifImage  = false;
      function getImage2() {
        count = 0;
        //随机数字
        var random = new Date();
        $('#weixinImageURL').attr("src", "/api/allinPay/getImage?payType=" + payType + "&payNumber=" + payNumber +"&random="+random.getTime());
        if (ifImage ){
          return;
        }
        sock = new SockJS("/api/endpointChat");
        if (sock){
          var stomp = Stomp.over(sock);
          stomp.connect('guest', 'guest', function(frame) {

            /**  订阅了/queue/notifications/ 发送的消息,这里雨在控制器的 convertAndSendToUser 定义的地址保持一致, 
             *
             */
            stomp.subscribe("/api/queue/notifications/"+payNumber, handleNotification);
            console.info("connect==success====");
          });
        }else {
          qrTimer = setInterval(queryOrderBankState, 5000);
        }
        getImage();
        $('.j_weixinInfo').removeClass("font-red");
      }

      function errorImage() {
        ifImage = true;
        $(".j_weixiRetry").show();
        $('#weixinImageURL').attr("src", "/pc/images/QRCode/qr_encode.png");
        clearTimeout(id_of_settimeout);
        clearInterval(qrTimer);
        var html = '<a href="http://www2.3j1688.com">支付超时,请重新下单 </a>'
        $('.j_weixinInfo').html(html);
      }
    </script>        <!-- order 订单信息 end -->

    <!-- payment 支付方式选择 -->
    <div class="payment">
      <!-- 微信支付 -->
      <div class="pay-weixin">
        <div id="payType" class="p-w-hd" th:data="${#httpServletRequest.getParameter('payType')}">
          <span th:if="${#httpServletRequest.getParameter('payType')}=='W01'">微信支付</span>
          <span th:if="${#httpServletRequest.getParameter('payType')}=='A01'">支付宝</span>
          <span th:if="${#httpServletRequest.getParameter('payType')}=='Q01'">QQ支付</span>

        </div>
        <div class="p-w-bd" style="position:relative">
          <div class="j_weixinInfo" style="position:absolute; top: -36px; left: 130px;">距离二维码过期还剩<span
                  class="j_qrCodeCountdown font-bold font-red">60</span>秒，过期后请刷新页面重新获取二维码。
          </div>
          <!--<div class="j_weixinInfo font-red" style="position:absolute; top: -36px; left: 130px;">
            二维码已过期，<a href="javascript:getWeixinImage2();">刷新</a>页面重新获取二维码。
          </div>-->
          <div class="p-w-box">
            <div class="pw-box-hd">
              <img id="weixinImageURL"
                   th:src="'/pc/images/QRCode/qr_encode.png'" onerror="javascript:errorImage();"  width="298"
                   height="298">
            </div>
            <div class="pw-retry j_weixiRetry" style="display: none;">
              <a class="ui-button ui-button-gray j_weixiRetryButton" href="http://www2.3j1688.com">支付超时,请重新下单 </a>
            </div>
            <div class="pw-box-ft">
              <p>请使用
                <span th:text="${#httpServletRequest.getParameter('payType')}=='W01'?'微信'">微信</span>
                <span th:text="${#httpServletRequest.getParameter('payType')}=='A01'?'支付宝'">微信</span>
                <span th:text="${#httpServletRequest.getParameter('payType')}=='Q01'?'QQ'">微信</span>
                扫一扫</p>
              <p>扫描二维码支付</p>
            </div>
          </div>
          <div class="p-w-sidebar" th:classappend="'p-w-sidebar'+${#httpServletRequest.getParameter('payType')}"></div>
        </div>
      </div>
      <!-- 微信支付 end -->
      <!-- payment-change 变更支付方式 -->
      <div class="payment-change">
        <a class="pc-wrap" onclick="window.history.go(-1)">
          <i class="pc-w-arrow-left">&lt;</i>
          <strong>选择其他支付方式</strong>
        </a>
      </div>
      <!-- payment-change 变更支付方式 end -->
    </div>
    <!-- payment 支付方式选择 end -->
  </div>
</div>
<script th:src="@{/pc/js/sockjs.min.js}"></script>
<script th:src="@{/pc/js/stomp.min.js}"></script>
</body>
</html>